<template>
  <div class="JointInspection-report">
    <div class="JointInspection-report-btn">
      <!-- <el-button class="table-query" type="primary" @click="alarm">告警推送</el-button> -->
      <el-button class="table-query" type="primary" @click="refreshReport">刷新报告</el-button>
      <el-button class="table-query" type="primary" @click="exportimg">导出采集信息图片</el-button>
      <el-button class="table-query" type="primary" @click="exportExcel">导出Excel报告</el-button>
    </div>
    <div class="JointInspection-report-con">
      <div class="xjxxhz">
        <div @click="jbxxClick" class="report-title">
          &nbsp;&nbsp;一 &nbsp;基本信息
          <i v-if="!jbxxState" class="el-icon-arrow-right"></i>
          <i v-if="jbxxState" class="el-icon-arrow-down"></i>
        </div>
        <basicInfo
          v-show="jbxxState"
          :xjxxhzTotals="xjxxhzTotals"
          :ycxjxxTatals="ycxjxxTatals"
          :ylxjxxTatals="ylxjxxTatals"
          :rgsbxxTatals="rgsbxxTatals"
          :Manipulation="Manipulation"
          :JHLX="JHLX"
        />
      </div>
      <div class="xjxxhz">
        <div @click="abnormalClick" class="report-title">
          &nbsp;&nbsp;二 &nbsp;异常巡检信息
          <i v-if="!abnormalState" class="el-icon-arrow-right"></i>
          <i v-if="abnormalState" class="el-icon-arrow-down"></i>
        </div>
        <abnormal
          v-show="abnormalState"
          ref="mychildAbnormal"
          @imgHandel="imgHandel"
          @closeHandel="closeHandel"
          @ycxjxxTatal="ycxjxxTatal"
          :qvxl="qvxl"
          :Manipulation="Manipulation"
          :jgdy="jgdy"
          @showtrue="showtrueabnormal"
          :JHLX="JHLX"
        />
      </div>
      <div class="xjxxhz">
        <div @click="ylxjxxClick" class="report-title">
          &nbsp;&nbsp;三 &nbsp;遗漏巡检信息
          <i v-if="!ylxjxxState" class="el-icon-arrow-right"></i>
          <i v-if="ylxjxxState" class="el-icon-arrow-down"></i>
        </div>
        <ylxjxx
          v-show="ylxjxxState"
          ref="mychildYlxjxx"
          @imgHandel="imgHandel"
          @closeHandel="closeHandel"
          @ylxjxxTatal="ylxjxxTatal"
          :qvxl="qvxl"
          :Manipulation="Manipulation"
          :jgdy="jgdy"
          @showtrue="showtrueylxjxx"
          :JHLX="JHLX"
        />
      </div>
      <div class="xjxxhz">
        <div @click="rgsxxClick" class="report-title">
          &nbsp;&nbsp;四&nbsp;人工识别信息
          <i v-if="!rgsxxState" class="el-icon-arrow-right"></i>
          <i v-if="rgsxxState" class="el-icon-arrow-down"></i>
        </div>
        <rgsxx
          v-show="rgsxxState"
          ref="mychildRgsxx"
          @imgHandel="imgHandel"
          @closeHandel="closeHandel"
          @rgsbxxTatal="rgsbxxTatal"
          :qvxl="qvxl"
          :Manipulation="Manipulation"
          :jgdy="jgdy"
          @showtrue="showtruergsxx"
          :JHLX="JHLX"
        />
      </div>
      <div class="xjxxhz">
        <div @click="zsbzdxdxxClick" class="report-title">
          &nbsp;&nbsp;五&nbsp;主设备自动校对信息
          <i v-if="!zsbzdxdxxState" class="el-icon-arrow-right"></i>
          <i v-if="zsbzdxdxxState" class="el-icon-arrow-down"></i>
        </div>
        <zsbzdxdxx
          v-show="zsbzdxdxxState"
          ref="mychildZsbzdxdxx"
          @imgHandel="imgHandel"
          @closeHandel="closeHandel"
          :qvxl="qvxl"
          :Manipulation="Manipulation"
          :jgdy="jgdy"
          @showtrue="showtruezsbzdxdxx"
          :JHLX="JHLX"
        />
      </div>
      <div class="xjxxhz">
        <div @click="zxjczdxdxxClick" class="report-title">
          &nbsp;&nbsp;六&nbsp;在线监测自动校对信息
          <i v-if="!zxjczdxdxxState" class="el-icon-arrow-right"></i>
          <i v-if="zxjczdxdxxState" class="el-icon-arrow-down"></i>
        </div>
        <zxjczdxdxx
          v-show="zxjczdxdxxState"
          ref="mychildZxjczdxdxx"
          @imgHandel="imgHandel"
          @closeHandel="closeHandel"
          :qvxl="qvxl"
          :Manipulation="Manipulation"
          :jgdy="jgdy"
          @showtrue="showtruezxjczdxdxx"
          :JHLX="JHLX"
        />
      </div>
      <div class="xjxxhz">
        <div @click="xjxxhzClick" class="report-title">
          &nbsp;&nbsp;七&nbsp;巡检信息汇总
          <i v-if="!xjxxhzState" class="el-icon-arrow-right"></i>
          <i v-if="xjxxhzState" class="el-icon-arrow-down"></i>
        </div>
        <xjxxhz
          v-show="xjxxhzState"
          ref="mychildXjxxhz"
          @imgHandel="imgHandel"
          @closeHandel="closeHandel"
          @xjxxhzTotal="xjxxhzTotal"
          :qvxl="qvxl"
          :Manipulation="Manipulation"
          :jgdy="jgdy"
          @showtrue="showtruexjxxhz"
          :JHLX="JHLX"
        />
      </div>
      <div class="qrbg" v-if="this.Manipulation.SFQR==0  || this.Manipulation.SFQR=='-'">
        <el-button class="btn" @click="qrbgClick" type="primary">确认报告</el-button>
      </div>
      <div class="qrbg-qr" v-if="this.Manipulation.SFQR==1">
        <span>确认人：{{this.Manipulation.USERNAME}} &nbsp;&nbsp; 确认时间：{{time}}</span>
      </div>
    </div>
    <el-dialog :title="'信息'" top="30vh" :visible.sync="dialogVisible" width="400px" :modal="false">
      <el-form :model="sonFormData" size="medium" label-width="110px">
        <el-form-item label="巡检结果：">
          <el-input
            v-model="sonFormData.xjjg"
            placeholder
            type="text"
            clearable
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item label="识别结论：">
          <el-select
            v-model="sonFormData.sbjl"
            placeholder="请选择"
            clearable
            :style="{width: '100%'}"
            @change="xjjgChange"
          >
            <el-option
              v-for="(item, index) in sbjlOp"
              :key="index"
              :label="item.interval"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <div class="btns centerbox">
          <el-button type="primary" @click="handleSave">确认</el-button>
          <el-button type="primary" @click="handleClose">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog
      :title="imgTabledata.CDSBMC"
      top="10vh"
      :visible.sync="imgVisible"
      width="90%"
      :modal="false"
    >
      <div v-if="imgVisible" class="imgS">
        <img :src="url" alt />
      </div>
      <div class="btns centerbox">
        <!-- <el-button type="primary" @click="handleSave">确认</el-button>
        <el-button type="primary" @click="handleClose">取消</el-button>-->
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
//basicInfo 基本信息   abnormal异常巡检信息
import { basicInfo, abnormal } from "./reportcom/index";
import ylxjxx from "./reportcom/ylxjxx.vue"; //遗漏巡检信息
import rgsxx from "./reportcom/rgsxx.vue"; // 人工识信息
import zsbzdxdxx from "./reportcom/zsbzdxdxx.vue"; // 主设备自动校对信息
import zxjczdxdxx from "./reportcom/zxjczdxdxx.vue"; // 在线监测自动校对信息
import xjxxhz from "./reportcom/xjxxhz.vue"; // 巡检信息汇总
import time from "@/utils/time.js";
@Component({
  components: {
    basicInfo,
    abnormal,
    ylxjxx,
    rgsxx,
    zsbzdxdxx,
    zxjczdxdxx,
    xjxxhz,
  },
})
export default class extends Vue {
  @Prop()
  Manipulation: any;
  @Prop({ default: () => "" })
  JHLX;
  public qvxl = []; //巡检区域下拉
  jgdy: any = []; //间隔单元下拉
  dialogVisible = false;
  imgVisible = false;
  url = "";
  sonFormData: any = {
    xjjg: "",
    sbjl: "",
  };
  sbjlOp = [
    {
      interval: "告警",
      id: "0",
    },
    {
      interval: "正常",
      id: "1",
    },
    {
      interval: "漏检",
      id: "2",
    },
    {
      interval: "无法识别",
      id: "3",
    },
    {
      interval: "人工识别",
      id: "4",
    },
    {
      interval: "预警",
      id: "5",
    },
  ];
  //告警推送
  alarm() {
    this.$emit("AlarmPush", this.Manipulation);
  }
  //刷新报告
  refreshReport() {
    (this as any).$refs.mychildAbnormal.init();
    (this as any).$refs.mychildYlxjxx.init();
    (this as any).$refs.mychildRgsxx.init();
    (this as any).$refs.mychildZsbzdxdxx.init();
    (this as any).$refs.mychildZxjczdxdxx.init();
    (this as any).$refs.mychildXjxxhz.init();
  }
  //数据点击 结果
  tableList: any = {};
  closeHandel(val, bla) {
    console.log("val:", val);

    this.dialogVisible = bla;
    this.tableList = val;
    this.sonFormData.xjjg = val.SBJG;
    this.sonFormData.sbjl = String(val.XSJG);
  }
  xjjgChange(value) {
    console.log(value);

    if (this.sonFormData.sbjl == "") {
      this.sonFormData.sbjl = this.tableList.XSJG;
    }
  }
  //数据点击
  handleSave() {
    this.sonFormData.id = this.tableList.ID;
    // console.log(this.sonFormData);
    (this as any).$services
      .updateInspect({
        data: this.sonFormData,
        method: "post",
        postparams: true,
      })
      .then((result: any) => {
        // console.log(result);
        if (result.code == 200) {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.dialogVisible = false;
          this.refreshReport();
        } else {
          this.$message({
            type: "warning",
            message: "操作失败",
          });
        }
      })
      .catch((err: any) => {
        console.log(err);
        this.$message({
          type: "error",
          message: `${err.msg}`,
        });
      });
  }
  handleClose() {
    this.dialogVisible = false;
  }
  //点击图标 弹框
  imgTabledata: any = {};
  imgHandel(val, bla) {
    this.imgTabledata = val;
    this.imgVisible = true;
    this.url = val.GLTX_URL;
    // console.log(val, bla);
  }
  init() {
    (this as any).$services
      .getQyData({
        data: {
          jhid: this.Manipulation.ID,
          jhlx: this.JHLX,
          xslx: this.Manipulation.XSLX,
        },
      })
      .then((result: any) => {
        this.qvxl = result.data;
        // console.log(result);
      })
      .catch((err: object) => {
        console.log(err);
      });
    (this as any).$services
      .getJgData({
        data: {
          jhid: this.Manipulation.ID,
          jhlx: this.JHLX,
          xslx: this.Manipulation.XSLX,
        },
      })
      .then((result: any) => {
        this.jgdy = result.data;
        // console.log(result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // astatus=false

  //巡检信息汇总 总数
  xjxxhzTotals = "";
  xjxxhzTotal(val) {
    this.xjxxhzTotals = val;
    // this.astatus = true
    // console.log(val);
  }
  ycxjxxTatals = "";
  //异常巡检信息 总数
  ycxjxxTatal(val) {
    this.ycxjxxTatals = val;
    // console.log(val);
  }
  //遗漏巡检信息 总数
  ylxjxxTatals = "";
  ylxjxxTatal(val) {
    this.ylxjxxTatals = val;
    // console.log(val);
  }
  //人工识别信息 总数
  rgsbxxTatals = "";
  rgsbxxTatal(val) {
    this.rgsbxxTatals = val;
    // console.log(val);
  }
  //导出Excel
  exportExcel() {
    var form: any = {};
    form.jhid = this.Manipulation.ID || "";
    form.xslx = this.Manipulation.XSLX || "";
    form.xjsc = this.Manipulation.XSKSSJ || "";
    if (this.$route.name == "track") {
      form.jhlx = "fjh";
    }
    // (this as any).$services
    //   .exportExcel({ data: form })
    //   .then((result: any) => {
    //     console.log(result);
    //   })
    //   .catch((err: object) => {
    //     console.log(err);
    //   });
    let url = `${(window as any).VUE_APP_BASEURL}/zdxs/xsbg/exportExcel?jhid=${
      form.jhid
    }&xslx=${form.xslx}&xjsc=${form.xjsc}&jhlx=${form.jhlx || ''}`;
    window.open(url, "_top");
  }
  //导出图片
  exportimg() {
    var form: any = {};
    form.jhid = this.Manipulation.ID || "";
    form.xslx = this.Manipulation.XSLX || "";
    form.xjsc = this.Manipulation.XSKSSJ || "";
    (this as any).$services
      .exportImages({ data: form, method: "get" })
      .then((result: any) => {
        console.log(result);
        if (result == 2) {
          this.$message({
            type: "warning",
            message: "暂无图片",
          });
        } else {
          let url = `${
            (window as any).VUE_APP_BASEURL
          }/zdxs/xsbg/exportImages?jhid=${form.jhid}&xslx=${form.xslx}&xjsc=${
            form.xjsc
          }`;
          // console.log('url:',url);
          window.open(url, "_top");
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  //确认报告
  qrbgClick() {
    var form: any = {};
    form.jhid = this.Manipulation.ID || "";
    form.xslx = this.Manipulation.XSLX || "";
    form.jhlx = this.JHLX ? this.JHLX : "zjh";
    var aa = localStorage.getItem("userinf");
    form.userName = JSON.parse(aa).username;

    (this as any).$services
      .getNoConfirmXsbg({ data: form })
      .then((result: any) => {
        // console.log(result);
      })
      .catch((err: object) => {
        console.log(err);
      });
    (this as any).$services
      .xsjhConfirm({ data: form })
      .then((result: any) => {
        this.$emit("closeHandel");
        // console.log(result);
      })
      .catch((err: object) => {
        console.log(err);
        this.$emit("closeHandel");
      });
  }
  //点击基本信息 状态
  jbxxState = true; //默认展开
  //点击基本信息
  jbxxClick() {
    this.jbxxState = !this.jbxxState;
  }
  //点击异常巡检信息 状态
  abnormalState = false;
  //点击异常巡检信息
  abnormalClick() {
    this.abnormalState = !this.abnormalState;
  }
  //点击遗漏巡检信息 状态
  ylxjxxState = false;
  //点击遗漏巡检信息
  ylxjxxClick() {
    this.ylxjxxState = !this.ylxjxxState;
  }
  //点击人工识别信息 状态
  rgsxxState = false;
  //点击人工识别信息
  rgsxxClick() {
    this.rgsxxState = !this.rgsxxState;
  }
  //点击主设备自动校对信息 状态
  zsbzdxdxxState = false;
  //点击主设备自动校对信息
  zsbzdxdxxClick() {
    this.zsbzdxdxxState = !this.zsbzdxdxxState;
  }
  //点击在线监测自动校对信息 状态
  zxjczdxdxxState = false;
  //点击在线监测自动校对信息
  zxjczdxdxxClick() {
    this.zxjczdxdxxState = !this.zxjczdxdxxState;
  }
  //点击巡检信息汇总 状态
  xjxxhzState = false;
  //点击巡检信息汇总
  xjxxhzClick() {
    this.xjxxhzState = !this.xjxxhzState;
  }

  // 默认展开
  showtrueabnormal() {
    this.abnormalState = true;
  }
  showtrueylxjxx() {
    this.ylxjxxState = true;
  }
  showtruergsxx() {
    this.rgsxxState = true;
  }
  showtruezsbzdxdxx() {
    this.zsbzdxdxxState = true;
  }
  showtruezxjczdxdxx() {
    this.zxjczdxdxxState = true;
  }
  showtruexjxxhz() {
    this.xjxxhzState = true;
  }

  //当前时间
  time: any = "";
  mounted() {
    console.log(this.Manipulation);
    var aData: any = new Date();
    this.time = time(aData);

    this.init();
  }
}
</script>

<style lang="scss" scoped>
.JointInspection-report {
  width: 100%;
  height: 74vh;
  .JointInspection-report-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    height: 50px;
  }
  .JointInspection-report-con {
    padding-right: 0.1rem;
    width: 100%;
    height: calc(100% - 40px);
    overflow-y: auto;
    i {
      cursor: pointer;
      margin-right: 0.1rem;
    }
  }
  .report-title {
    font-size: 0.2rem;
    font-weight: 400;
    height: 0.5rem;
    line-height: 0.5rem;
    margin: 0.1rem 0;
    background-color: rgba(60, 120, 216, 0.2);
    i {
      float: right;
      line-height: 0.5rem;
    }
  }
  .xjxxhz {
    width: 100%;
    background: rgba(60, 120, 216, 0.1);
    padding-bottom: 0.1rem;
    box-sizing: border-box;
    margin-bottom: 0.1rem;
  }
  .qrbg {
    height: 0.5rem;
    border-top: 2px solid rgba(60, 120, 216, 0.6);

    .btn {
      float: right;
      margin-top: 0.05rem;
    }
  }
  .qrbg-qr {
    height: 0.5rem;
    border-top: 2px solid rgba(60, 120, 216, 0.6);
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .btns {
    width: 100%;
    height: 0.4rem;
    margin: 0.2rem auto 0;
    box-sizing: border-box;
  }
  .imgS {
    width: 86%;
    height: 600px;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
<style lang="scss">
.JointInspection-report {
  .el-collapse {
    border: none;
    background: #002279;
    margin-bottom: 0.1rem;
  }
  .el-collapse-item__header,
  .el-collapse-item__wrap {
    border: none;
  }
}
</style>

